<template>
  <page-layout :noToolbar="true">
    <div slot="toolbar">
      <!--<el-button size="small" round type="primary" @click="newUser">新增人员</el-button>-->
    </div>
    <div class="card-header" >系统统计信息</div>
    <el-card class="box-card">
      <el-row :gutter="10">
        <el-col :span="4">
          <el-card class="card_h">
            <p class="t">积分发放合计</p>
            <p class="tm">{{sysScore.total}}</p>
          </el-card>
        </el-col>
        <el-col :span="4" >
          <el-card class="card_h">
            <p class="t">积分收回合计</p>
            <p class="tm">{{-sysScore.back}}</p>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="card_h">
            <p class="t">用户积分余量合计</p>
            <p class="tm">{{sysScore.balance}}</p>
          </el-card>
        </el-col>

      </el-row>
    </el-card>
    <div class="card-header" style="margin-top: 5px;">积分记录</div>
      <el-card class="box-card">
        <el-form ref="searchScoreRecordCondition" :model="searchScoreRecordCondition" label-width="80px" inline>
          <el-form-item label="姓名">
            <el-input v-model="searchScoreRecordCondition.userName" />
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="searchScoreRecordCondition.type" placeholder="请选择">
              <el-option
                v-for="item in ScoreTypes"
                :key="item.value"
                :label="item.text"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="查询时间">
            <el-date-picker
              v-model="value4"
              type="datetimerange"
              range-separator="至"
              start-placeholder="查询开始日期"
              end-placeholder="查询截至日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="refresh(1)">查询</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="box-card">
            <el-table
              :data="scoreRecordList.content" border stripe
              style="width: 100%">
              <el-table-column
                prop="id"
                label="编号"
                width="55">
              </el-table-column>
              <el-table-column prop="userName" label="用户姓名"></el-table-column>
              <el-table-column prop="departName" label="所属企业"></el-table-column>
              <el-table-column prop="title" label="任务名称">
              </el-table-column>
              <el-table-column prop="type" label="类型">
                <template slot-scope="scope">
                  <span>{{scope.row.type| keyText('ScoreType')}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="score" label="积分" ></el-table-column>
              <el-table-column prop="createTime" label="领取时间" ></el-table-column>
              <!--<el-table-column label="操作" width="220">-->
                <!--<template slot-scope="scope">-->
                  <!--<el-button size="mini" type="text"  >查看</el-button>-->
                <!--</template>-->
              <!--</el-table-column>-->
            </el-table>
            <div class="mt10">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="scoreRecordList.totalElements"
                :page-size="scoreRecordList.size"
                :current-page.sync="currentPage" @current-change="getPageChange">
              </el-pagination>
            </div>
          </el-card>
  </page-layout>
</template>
<script>
import PageLayout from "@/components/page-layout";
import { mapGetters } from "vuex";
import Status from "@/libs/status";
import _ from "lodash";
import Moment from "moment";
export default {
  created() {
    this.refresh();
  },
  mounted() {
    this.ScoreTypes = _.clone(Status.ScoreType);
    this.ScoreTypes.unshift({ value: "", text: "全部" });
  },
  data() {
    return {
      currentPage: 1,
      value4: [],
      ScoreTypes: []
    };
  },
  computed: {
    ...mapGetters({
      scoreRecordList: "scoreRecordList",
      sysScore: "sysScore",
      searchScoreRecordCondition: "searchScoreRecordCondition"
    })
  },
  methods: {
    getPageChange(val) {
      this.searchScoreRecordCondition.startTime = "";
      this.searchScoreRecordCondition.endTime = "";
      if (this.value4 && this.value4.length > 0) {
        this.searchScoreRecordCondition.startTime = Moment(
          this.value4[0]
        ).format("YYYY-MM-DD HH:mm:ss");
        this.searchScoreRecordCondition.endTime = Moment(this.value4[1]).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      var tem = Object.assign(
        { pageIndex: val - 1 },
        this.searchScoreRecordCondition
      );
      this.$store.dispatch("getScoreRecordPageS", tem).then(ret => {});
    },
    refresh() {
      this.getPageChange(1);
      this.$store.dispatch("getScoreStatS").then(ret => {});
    }
  },
  components: {
    PageLayout
  }
};
</script>
<style scoped>
.card_h {
  height: 85px;
  background-color: #dedede;
}
.t {
  text-align: center;
}
.tm {
  text-align: center;
  margin-bottom: 5px;
  margin-top: 15px;
}
p {
  line-height: 1.41;
  text-align: justify;
  margin: -0.2em 0;
  word-break: break-all;
}
</style>
